{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-md-8">
        <!-- 搜索头部 -->
        <div class="card mb-4">
            <div class="card-body">
                <h4 class="card-title">
                    {% if query %}
                        {% if results_count > 0 %}
                            找到 {{ results_count }} 条关于 "{{ query }}" 的结果
                        {% else %}
                            没有找到关于 "{{ query }}" 的结果
                        {% endif %}
                    {% else %}
                        搜索文章
                    {% endif %}
                </h4>
                
                <!-- 搜索框 -->
                <form action="{{ url_for('search') }}" method="GET" class="mb-3">
                    <div class="input-group">
                        <input type="text" name="q" class="form-control" 
                               placeholder="搜索文章标题或内容..." 
                               value="{{ query }}" required>
                        <button class="btn btn-primary" type="submit">
                            <i class="fas fa-search"></i> 搜索
                        </button>
                    </div>
                </form>
                
                {% if not query %}
                <div class="alert alert-info">
                    <p class="mb-0">请输入关键词搜索相关文章</p>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- 搜索结果 -->
        {% if query %}
            {% if results_count > 0 %}
                {% for post in posts.items %}
                <div class="card mb-4">
                    <div class="card-body">
                        <h5 class="card-title">
                            <a href="{{ url_for('post_detail', post_id=post.id) }}" class="text-decoration-none">
                                {{ post.title }}
                            </a>
                        </h5>
                        
                        <!-- 文章预览（高亮搜索词） -->
                        <div class="card-text mb-3">
                            {% set content_preview = post.content[:200] %}
                            {% if query.lower() in content_preview.lower() %}
                                {% set words = content_preview.split(' ') %}
                                {% set highlighted_content = [] %}
                                {% for word in words %}
                                    {% if query.lower() in word.lower() %}
                                        {% set highlighted_content = highlighted_content + ['<mark>' + word + '</mark>'] %}
                                    {% else %}
                                        {% set highlighted_content = highlighted_content + [word] %}
                                    {% endif %}
                                {% endfor %}
                                {{ highlighted_content|join(' ')|safe }}...
                            {% else %}
                                {{ content_preview }}...
                            {% endif %}
                        </div>
                        
                        <!-- 文章元信息 -->
                        <div class="d-flex justify-content-between align-items-center text-muted">
                            <div>
                                <small>
                                    <a href="{{ url_for('user_profile', username=post.author.username) }}" 
                                       class="text-decoration-none text-muted">
                                        作者: {{ post.author.username }}
                                    </a>
                                </small>
                                <small class="ms-3">{{ post.date_posted.strftime('%Y-%m-%d %H:%M') }}</small>
                                <small class="ms-3">评论: {{ post.comments|length }}</small>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}

                <!-- 分页导航 -->
                {% if posts.pages > 1 %}
                <nav aria-label="搜索结果分页">
                    <ul class="pagination justify-content-center">
                        {% if posts.has_prev %}
                        <li class="page-item">
                            <a class="page-link" href="{{ url_for('search', q=query, page=posts.prev_num) }}">上一页</a>
                        </li>
                        {% else %}
                        <li class="page-item disabled">
                            <span class="page-link">上一页</span>
                        </li>
                        {% endif %}

                        {% for page_num in posts.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %}
                            {% if page_num %}
                                {% if page_num == posts.page %}
                                <li class="page-item active">
                                    <span class="page-link">{{ page_num }}</span>
                                </li>
                                {% else %}
                                <li class="page-item">
                                    <a class="page-link" href="{{ url_for('search', q=query, page=page_num) }}">{{ page_num }}</a>
                                </li>
                                {% endif %}
                            {% else %}
                                <li class="page-item disabled">
                                    <span class="page-link">...</span>
                                </li>
                            {% endif %}
                        {% endfor %}

                        {% if posts.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="{{ url_for('search', q=query, page=posts.next_num) }}">下一页</a>
                        </li>
                        {% else %}
                        <li class="page-item disabled">
                            <span class="page-link">下一页</span>
                        </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}
                
            {% else %}
                <div class="alert alert-warning text-center">
                    <h5>没有找到相关结果</h5>
                    <p class="mb-0">尝试使用其他关键词搜索，或者<a href="{{ url_for('index') }}">浏览所有文章</a></p>
                </div>
            {% endif %}
        {% endif %}
    </div>
    
    <!-- 侧边栏 -->
    <div class="col-md-4">
        <div class="card sidebar-card">
            <div class="card-header">
                <h6 class="mb-0">搜索提示</h6>
            </div>
            <div class="card-body">
                <ul class="list-unstyled mb-0">
                    <li>• 搜索文章标题和内容</li>
                    <li>• 支持中文关键词</li>
                    <li>• 不区分大小写</li>
                    <li>• 支持部分匹配</li>
                </ul>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                <h6 class="mb-0">热门标签</h6>
            </div>
            <div class="card-body">
                <div class="d-flex flex-wrap gap-2">
                    <span class="badge bg-secondary">Python</span>
                    <span class="badge bg-secondary">Flask</span>
                    <span class="badge bg-secondary">Web开发</span>
                    <span class="badge bg-secondary">博客</span>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}